<script setup>
import { reactive } from 'vue';
import { useRouter, RouterView } from 'vue-router';


const list = reactive([])

for(let i=0;i<10;i++){
  list.push({
    id: i,
    title:"这是新闻标题" + (i+1)
  })
}

const router = useRouter()

function go(id){
  router.push({
    // path:"/news/detail/"+id
    name:"detail",
    params:{
      id:id
    }
  })
}

</script>

<template>
  <div class="about">
    <h1>这是新闻列表</h1>
    <ul>
      <li v-for="val in list" :key="val.id" @click="go(val.id)">{{ val.title }}</li>
    </ul>
    <router-view></router-view>
  </div>
</template>

<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
